<template>
  <div class="app-container box">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" :body-style="{padding:'0',height:'850px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                   常规视频播放(可配置弹幕)
                </span>
            </div>
            <el-row>
              <div class="videoPlayer">
                <xgplayer :url="videoUrl" @triggerEvent="triggerEvent" :urlArr="urlList"></xgplayer>
              </div>
            </el-row>
            <el-row>
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="弹幕">
                  <el-input v-model="formInline.content"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">发送弹幕</el-button>
                </el-form-item>
                <br>
                <el-form-item label="视频上传">
                  <el-button @click="upload">选择视频</el-button>
                </el-form-item>
              </el-form>

            </el-row>

          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import xgplayer from '@/components/xgplayer'
import ChooseFile from '@/utils/ChooseFile'
export default {
  name: 'player',
  components: { xgplayer, },
  data() {
    return {
      ChooseFile:ChooseFile,
      videoName:'',
      videoUrl: 'misa',
      urlList: [],
      formInline: {
        content: '河北彩花'
      }
    }
  },
  methods: {
    triggerEvent(value) {

    },
    upload(){
      let that = this
      this.ChooseFile((files)=>{
        if (files[0].type!=="video/mp4"){
          this.$message.error('必须上传视频文件');
        }else {
          let oFReader = new FileReader();
          oFReader.readAsDataURL(files[0]);
          oFReader.onloadend = function(oFRevent){
            that.videoUrl = oFRevent.target.result;
          }
        }

      })
    },
    onSubmit() {
      this.$EventBus.$emit('sentMsg', this.formInline.content)
      this.formInline.content = ''
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  ::v-deep.el-form-item__label {
    font-weight: 400;
  }

  .el-input {
    width: 200px;
    margin-right: 20px;
  }

  .demo-form-inline {
    padding: 20px;
    margin-left: 90px;
  }

  .videoPlayer {
    height: 500px;
    width: 900px;
    margin: 0 auto;
    margin-top: 10px;
  }

  .el-row, .el-col {
    margin-bottom: 20px;
  }

  .head-chart {
    display: flex;
    padding: 20px 20px 20px 20px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E4E7ED;

    .icon-chart {
      font-size: 14px;

      i {
        margin-right: 5px;
      }
    }
  }
}
</style>
